<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作常见的导航栏</title>
	
<style>
	
	nav{
		background-color:#E7E7E7;
	}
	
	.nav_t{
		width:550px;
		margin:0 auto;
	}
	
	.t_d{display:inline-block;}
	
	.til{
		display:block;
		margin:5px;
		padding:10px 15px;
		color:white;
		font-size:16px;
		text-decoration:none;
		border-radius:5px;
		background-color:#5e9bb0;
		cursor:pointer;
	}
	
	.down{
		width:120px;
		display:none;
		position:absolute;
		background-color:#f9f9f9;
		box-shadow:0px 8px 16px	0px rgba(0,0,0,2);
	}
	.down a{
		display:block;
		/*导航栏子选项超链接的显示方式*/
		padding:12px 16px;
		/*内边距*/
		text-decoration: none;
		/*隐藏超链接下划线*/
		color:black;
		/*更改为黑色文本*/
	}
	.down a:hover{
		background-color: #e7e7e7;
	}
	.t_d:hover.til{
		background-color: #417e7f;
	}
	
	.t_d:hover .down{
		/*折叠*/
		display: block;
	}
	
</style>

</head>
	

<body>
	<nav>
		<div class="nav_t">
			<div class="t_d">
				<a herf="#" class="til">电视</a>
				<div class="down">
					<a href="#">全面屏电视</a>
					<a href="#">教育电视</a>
					<a href="#">OLED电视</a>
					<a href="#">智慧屏</a>
					<a href="#">4K超清电视</a>
				</div>
			</div>
		</div>
	</nav>
</body>
</html>
